import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import TraceScope from './TraceScope.es6'
import Layout from '../common/layout.jsx'
import DefaultLoadingElement from 'lib/util/defaultLoadingElement.jsx'
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx'
import Card from 'lib/components/card.jsx'
import CardSpec from '../common/CardSpec.jsx'
import Tab from 'lib/components/tab.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import imsiCols from '../imsisearch/imsiCrashCols.jsx'
import CopyClipboard from 'lib/components/CopyClipboard.jsx';

var cols = [{
  title:'名称',
  key:'metricName'
},{
  title:'耗时(ms)',
  key:'duration'
},{
  title:'',
  key:'traceUrl',
  width:80,
  render:function(fmtVal,data){
    return (
      <a href={fmtVal} target="_blank">显示详情</a>
    )
  }
}]
export default class TraceView extends View{
  renderLoading(){
    return (
      <div className="widget-content">
        <DefaultLoadingElement />
      </div>
    )
  }
  renderDetail(trace){
    return (
      <div className="widget-content">
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card>
                <b>URL</b>
                <div className="float-right copy-box">
                  <CopyClipboard text={ trace.url }>
                    <a href="javascript:;" className="iconfont icon-copy"></a>
                  </CopyClipboard>
                </div>
                <div style={{marginTop: 5}}>
                { trace.url }
                </div>
              </Card>
            </div>
            <div className="box">
              <Card>
                <table className="text-detail">
                  <tbody>
                    <tr>
                      <th>APP版本：</th>
                      <td>{trace.appVersion}</td>
                      <th>请求时间：</th>
                      <td>{format.stampToTime(trace.timestamp)}</td>
                    </tr>
                    <tr>
                      <th>响应时间：</th>
                      <td>{trace.totalTime}秒</td>
                      <th>HTTP状态码：</th>
                      <td>{trace.statusCode}</td>
                    </tr>
                  </tbody>
                </table>
              </Card>
            </div>
            <div className="box">
              <Card>
                <table className="text-detail">
                  <tbody>
                    <tr>
                      <th>设备厂商：</th>
                      <td>{trace.manufacturer}</td>
                      <th>设备型号：</th>
                      <td>{trace.model}</td>
                      <th>操作系统：</th>
                      <td>{trace.os + ' ' + trace.osVersion}</td>
                    </tr>
                    <tr>
                      <th>运营商：</th>
                      <td>{trace.carries}</td>
                      <th>接入方式：</th>
                      <td>{trace.netType}</td>
                      <th>地域：</th>
                      <td>{trace.countryName + ' ' + trace.regionName}</td>
                    </tr>
                  </tbody>
                </table>
              </Card>
            </div>
            {
              trace.traceUrl?(
                <div className="box">
                  <Card title="事务">
                    <GridWidget cols={cols} store={{
                      data:[trace]
                    }}
                    />
                  </Card>
                </div>
              ):null
            }
          </div>
        </div>
      </div>
    )
  }
  render(){
    return (
      <div className="float-position-absolute">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            { this.state.trace && this.state.trace.url ? (
              <h4 style={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                width: '33%'
              }}>{ this.state.trace.url }</h4>
            ) : null }
          </div>
          {this.state.trace?(
            this.renderDetail(this.state.trace)
          ):(this.state.trace!==null?(
            <div className="widget-content">
              <DefaultNoDataElement />
            </div>
          ):this.renderLoading())}
        </div>
      </div>
    )
  }
}
TraceView.defaultProps = {
  Scope:TraceScope
}
